<template>
    <section class="section">
        <div class="close" @click="close">
            X
        </div>

        <div class="tit">
            请输入交易密码
        </div>
        <div class="tit2">
            还款金额 (元)
        </div>
        <div class="tit3">
            120.00
        </div>
        <div class="list">
            <input ref="password" v-model="password" type="number" maxlength="6">
            <div v-for="n in 6" :key="n" class="li">
                <div v-show="password.length>=n" class="dot" />
            </div>
        </div>
    </section>
</template>

<script>
  // keyword=#,#,#,######
export default {
  data(){
   return {
     password:'',
     visible:true
   }
  },
methods:{
  close(){
    this.visible=false
  }
}
}

</script>

<style type="text/css" lang="less" scoped>

.section{
    position: relative;
    padding: 48px;
    width: 590px;
    height: 528px;
    background: #FFFFFF;
    border-radius: 16px;
    text-align: center;
    .close{
        position: absolute;
        right: 32px;
        top: 32px;
    }
    .tit{
        font-size: 36px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: bold;
        color: #121736;
        line-height: 56px;
        margin-bottom: 56px;
    }
    .tit2{
        font-size: 28px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #121736;
        line-height: 36px;

    }
    .tit3{
        font-size: 88px;
        font-family: '360-Financial-Font-Test-06-Bold';
        color: #121736;
        line-height: 106px;
        margin-bottom: 56px;
    }
    .list{
        width: 494px;
        height: 82px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #EBECF0;
        display: flex;
        position: relative;
        input{
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
        }
        .li{
            width: 25%;
            height: 100%;
            border-right: 1px solid #EBECF0;
            display: flex;
            align-items: center;
            justify-content: center;
            .dot{
                width: 18px;
                height: 18px;
                background: #121736;
                border-radius: 50%;
            }
        }
    }
    .btn{
        padding-left: 48px;
        padding-right: 48px;
        .btn-txt{
            height: 96px;
            width: 100%;
        }
    }
}
</style>
